<template>
  <el-dialog
    title="导出报告"
    :visible.sync="dialogVisible"
    :before-close="handleClose"
    width="880px"
    class="eldialog2"
  >
    <!-- <div class="type-box">
      <span class="tit">文件格式</span>
      <el-radio-group v-model="formatRadio">
        <el-radio label="word">WORD</el-radio>
      </el-radio-group>
    </div> -->

    <div class="type-box">
      <span class="tit">报告分类</span>
      <el-radio-group v-model="reportType">
        <el-radio label="patent">专利报告</el-radio>
        <el-radio label="paper">论文报告</el-radio>
        <el-radio label="all">全景报告</el-radio>
      </el-radio-group>
    </div>

    <el-checkbox
      v-show="reportType != 'all'"
      :indeterminate="indeterminate"
      v-model="checkAll"
      @change="handleCheckAllChange"
      class="check-all"
      >全选</el-checkbox
    >
    <dl v-for="(item, index) in templ" :key="index" class="box">
      <dt>
        <el-checkbox
          :indeterminate="item.indeterminate"
          v-model="item.checkAll"
          @change="handleItemCheckChange(item, $event)"
          :label="item.tname"
          :disabled="reportType != 'all' ? false : true"
          >{{ item.tname }}</el-checkbox
        >
      </dt>
      <el-checkbox-group
        v-model="item.checkedArr"
        @change="handleItemCheckedArrChange(item, $event)"
      >
        <ul class="item-box">
          <li v-for="(ite, j) in item.children" :key="j">
            <el-checkbox
              :label="ite.tname"
              :disabled="reportType != 'all' ? false : true"
              >{{ ite.tname }}</el-checkbox
            >
          </li>
        </ul>
      </el-checkbox-group>
    </dl>

    <footer>
      <button class="reset-btn">清除</button>
      <button
        @click="handleSubmit"
        class="sure-btn"
        :class="{ 'sure-btn-disabled': sureBtnDisabled }"
      >
        <i v-show="sureBtnDisabled" class="icon el-icon-loading"></i>确定
      </button>
    </footer>
  </el-dialog>
</template>
<script>
import { mapState } from "vuex";
export default {
  props: {
    exportReportType: {
      type: String,
      default: "patent",
    },
  },
  data() {
    return {
      reportType: "",
      dialogVisible: false,
      // formatRadio: "word",
      checkAll: "",
      checkedArr: [],
      indeterminate: false,
      templ: [],
      sureBtnDisabled: false,
      sq: "",
      all_total: 0,
      subjects: "",
      allList: [
        {
          id: 1,
          parentId: 0,
          tname: "技术分析",
          children: [
            {
              id: 101000,
              parentId: 1,
              tname: "总体趋势分析",
            },
            {
              id: 102000,
              parentId: 1,
              tname: "技术分支/主题专利分析",
            },
            {
              id: 103000,
              parentId: 1,
              tname: "领域分支/主题论文分析",
            },
            {
              id: 104000,
              parentId: 1,
              tname: "高价值专利分析",
            },
            {
              id: 105000,
              parentId: 1,
              tname: "技术研究交叉分析",
            },
            {
              id: 106000,
              parentId: 1,
              tname: "技术主题趋势分析",
            },
            {
              id: 107000,
              parentId: 1,
              tname: "技术成熟度分析",
            },
          ],
        },
        {
          id: 2,
          parentId: 0,
          tname: "重点机构分析",
          children: [
            {
              id: 201000,
              parentId: 2,
              tname: "重点机构排名",
            },
            {
              id: 202000,
              parentId: 2,
              tname: "重点机构合作关系",
            },
          ],
        },
        {
          id: 3,
          parentId: 0,
          tname: "重点人才分析",
          children: [
            {
              id: 301000,
              parentId: 3,
              tname: "主要人才排名",
            },
            {
              id: 302000,
              parentId: 3,
              tname: "人才合作关系",
            },
          ],
        },
      ],
      allSelectObj: {
        patent: [
          {
            title: "专利趋势分析",
            code: 101000,
          },
          {
            title: "主要申请人排名",
            code: 301000,
          },
          {
            title: "主要发明人排名",
            code: 401000,
          },
          {
            title: "技术领域排名",
            code: 501000,
          },
          {
            title: "申请人合作关系",
            code: 601000,
          },
          {
            title: "发明人合作关系",
            code: 602000,
          },
        ],
        paper: [
          {
            title: "趋势分析",
            code: 1000000,
          },
          {
            title: "机构分析",
            code: 3000000,
          },
          {
            title: "学者分析",
            code: 4000000,
          },
          {
            title: "词云分析",
            code: 6000000,
          },
          {
            title: "学者合作分析",
            code: 8000000,
          },
          {
            title: "机构合作分析",
            code: 9000000,
          },
        ],
        other: [
          {
            title: "高价值专利分析",
            code: "patentRoadmap",
          },
          {
            title: "技术研究交叉分析",
            code: "technologyFrontier",
          },
          {
            title: "技术主题趋势分析",
            code: "technologyTopicTrends",
          },
          {
            title: "技术成熟度分析",
            code: "technologyMaturity",
          },
        ],
      },
    };
  },
  computed: {
    ...mapState(["searchWord"]),
  },
  methods: {
    init(ops) {
      if (ops) {
        this.sq = ops.sq;
        this.subjects = ops.subjects;
        this.all_total = ops.all_total;
      }
      this.dialogVisible = true;
      this.reportType = JSON.parse(JSON.stringify(this.exportReportType));
    },
    handleClose() {
      this.dialogVisible = false;
    },
    // 从数据库获取模板
    getTemplate() {
      this.$get(this.$Url.analysis.template, {
        dbid:this.reportType
      }).then(
        (res) => {
          let tempList;
          if (this.reportType == "all") {
            tempList = this.allList;
          } else {
            tempList = res.data[this.reportType];
          }
          let templ = [];
          // 暂时把价值分析去掉
          tempList.forEach((v) => {
            if (v.tname !== "价值分析") {
              templ.push(v);
            }
          });

          templ.forEach((v) => {
            v.checkedArr = [];
          });
          if (this.reportType == "all") {
            templ.forEach((v) => {
              v.checkAll = true;
              let arr = [];
              v.children.forEach((b) => {
                arr.push(b.tname);
              });
              v.checkedArr = arr;
            });
          }
          this.templ = templ;
        }
      );
    },
    // 全选
    handleCheckAllChange(val) {
      if (val) {
        this.templ.forEach((v, i) => {
          let arr = [];
          if (v.children.length > 0) {
            v.children.forEach((b, j) => {
              arr.push(b.tname);
            });
          } else {
            arr.push(v.tname);
          }
          this.$set(this.templ[i], "checkedArr", arr);
          this.$set(this.templ[i], "checkAll", true);
          this.$set(this.templ[i], "indeterminate", false);
        });
      } else {
        this.templ.forEach((v, i) => {
          this.$set(this.templ[i], "checkedArr", []);
          this.$set(this.templ[i], "checkAll", false);
          this.$set(this.templ[i], "indeterminate", false);
        });
      }
      this.indeterminate = false;
    },
    // 子一级勾选
    handleItemCheckChange(item, $event) {
      let arr = [];
      if (item.children.length > 0) {
        item.children.forEach((v) => {
          arr.push(v.tname);
        });
      } else {
        arr.push(item.tname);
      }
      this.$set(item, "checkedArr", $event ? arr : []);
      this.$set(item, "indeterminate", false);
    },
    // 子二级勾选
    handleItemCheckedArrChange(item, $event) {
      let count = $event.length;
      this.$set(item, "checkAll", count === item.children.length);
      this.$set(
        item,
        "indeterminate",
        count > 0 && count < item.children.length
      );
      this.$set(item, "checkedArr", $event);
    },
    // 提交
    handleSubmit() {
      if (this.checkAllArr.length <= 0) {
        this.$message({
          type: "warning",
          duration: 1000,
          message: "请至少勾选一种要导出的图表！",
        });
        return;
      }
      if (this.sureBtnDisabled) {
        return;
      }
      this.sureBtnDisabled = true;
      let items = {
        patent: [],
        paper: [],
        other: [],
      };
      if (this.reportType == "all") {
        items = this.allSelectObj;
      } else {
        items[this.reportType] = this.checkAllArr;
      }
      this.$post(this.$Url.analysis.exportAnalysisData, {
        items: items,
        sq: this.searchWord,
        // subjects: this.subjects,
        // total: this.all_total,
        dbid: this.reportType,
      })
        .then((res) => {
          if (res.status === 200) {
            this.sureBtnDisabled = false;
            this.dialogVisible = false;
            this.$message({
              type: "success",
              duration: 1000,
              message: "报告正在生成中，请进入下载中心查看进度！",
            });
          }
        })
        .catch((err) => {});
    },
  },
  watch: {
    reportType() {
      this.getTemplate();
    },
    templ: {
      deep: true,
      handler: function() {
        let indeterminateArr = [];
        let checkAllArr = [];
        this.templ.forEach((v) => {
          let childIndeterminate =
            (v["checkedArr"].length > 0 &&
              v["checkedArr"].length <= v["children"].length) ||
            (v["checkedArr"].length > 0 && v["children"].length == 0);
          indeterminateArr.push(childIndeterminate);
          let childCheckAll =
            (v["checkedArr"].length > 0 &&
              v["checkedArr"].length === v["children"].length) ||
            (v["checkedArr"].length > 0 && v["children"].length == 0);
          checkAllArr.push(childCheckAll);
        });

        let isHasTrue = indeterminateArr.filter((v) => v === true);
        let isHasTrue2 = checkAllArr.filter((v) => v === true);
        if (
          isHasTrue.length > 0 &&
          isHasTrue.length <= checkAllArr.length &&
          isHasTrue2.length !== checkAllArr.length
        ) {
          this.indeterminate = true;
        } else {
          this.indeterminate = false;
        }
        this.checkAll = isHasTrue2.length === checkAllArr.length ? true : false;
        let arr = [];
        this.templ.forEach((v) => {
          if (v.checkedArr && v.checkedArr.length > 0) {
            v.checkedArr.forEach((b) => {
              if (v.children.length > 0) {
                let a = v.children.find((n) => n.tname === b);
                if (Object.keys(a).length > 0) {
                  arr.push({
                    title: a.tname,
                    code: a.id,
                  });
                }
              } else {
                let a = this.templ.find((n) => n.tname === b);
                arr.push({
                  title: a.tname,
                  code: a.id,
                });
              }
            });
          }
        });
        this.checkAllArr = arr;
      },
    },
  },
};
</script>

<style lang="scss" scoped>
.type-box {
  margin-bottom: 10px;
  .tit {
    display: inline-block;
    font-size: 12px;
    color: $color69;
    margin-right: 48px;
  }
  ::v-deep {
    .el-radio__input.is-checked {
      .el-radio__inner {
        border-color: $color141;
        background-color: $mainColor;
      }
    }
    .el-radio__label {
      font-size: 12px;
      color: $color69;
    }
  }
}
.check-all {
  margin-bottom: 10px;
}
.box {
  position: relative;
  width: 100%;
  border: 1px solid $color142;
  margin-bottom: 20px;
  dt {
    position: relative;
    display: block;
    width: 100%;
    height: 38px;
    line-height: 38px;
    padding: 0 12px;
    box-sizing: border-box;
    background-color: $color4;
  }
  .item-box {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    width: 100%;
    padding: 12px 12px 0;
    li {
      width: 20%;
      margin-bottom: 12px;
    }
  }
}
footer {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  button {
    width: 80px;
    height: 29px;
    border: 1px solid $color141;
    border-radius: 30px;
    margin: 0 10px;
    text-align: center;
    font-size: 12px;
    cursor: pointer;
    &.reset-btn {
      color: $mainColor;
      background-color: $color2;
    }
    &.sure-btn {
      border-color: $mainColor;
      color: $color51;
      background-color: $mainColor;
      &.sure-btn-disabled {
        border-color: $color141 !important;
        background-color: $color141;
      }
      .icon {
        display: inline-block;
        margin-right: 4px;
      }
    }
  }
}
</style>
